{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% from "macros-protocol.html" import split, billboard, picto with context %}

{% extends "mozorg/home/base.html" %}

{# Bug 1438302, Issue 13019: Avoid duplicate content for English pages. #}
{%- block page_title_full -%}
  {%- if LANG == 'en-US' -%}
    Internet for people, not profit — Mozilla (US)
  {%- elif LANG == 'en-GB' -%}
    Internet for people, not profit — Mozilla (UK)
  {%- else -%}
    {{ ftl('home-internet-for-people-not-profit') }}
  {%- endif -%}
{%- endblock -%}
{% block page_title_suffix %}{% endblock %}

{% block page_desc %}{{ ftl('home-did-you-know-mozilla-the-maker') }}{% endblock %}

{% set fundraising_banner_langs = ['en-US', 'en-GB', 'en-CA', 'es-AR', 'es-CL', 'es-ES', 'es-MX', 'de', 'fr', 'it', 'pl', 'pt-BR'] %}
{% set show_firefox_app_store_banner = switch('firefox-app-store-banner') %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('protocol-picto') }}
  {{ css_bundle('protocol-newsletter') }}
  {{ css_bundle('home-new') }}

  {% if switch('mofo-donate-promo') %}
    {{ css_bundle('mofo-donate-promo')}}
  {% endif %}

  {% if LANG == 'de' and switch('de-ctd-homepage-promo') %}
    {{ css_bundle('ctd-promo') }}
  {% endif %}

  {% if show_firefox_app_store_banner %}
    {{ css_bundle('firefox-app-store-banner') }}
  {% endif %}
{% endblock %}

{% block page_banner %}
  {% if show_firefox_app_store_banner %}
    {% include 'includes/banners/mobile/firefox-app-store.html' %}
  {% endif %}
{% endblock %}

{% set utm_params = '?utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=homepage' %}

{% block content %}

<header>
  {%- if LANG == 'de' and switch('de-ctd-homepage-promo') -%}
    {% include 'mozorg/home/includes/ctd-promo-de.html'%}
  {% endif %}

  <div class="c-header-wrapper mzp-l-content mzp-t-content-lg">
    <h1>{{ ftl('home-mission-driven') }}</h1>
    <p>{{ ftl('home-were-not-normal') }}</p>
  </div>
</header>

<main class="c-homepage">
  <div class="c-quote mitchell">
    <div class="c-quote-wrapper mzp-l-content mzp-t-content-lg">
      <blockquote>
        <p>{{ ftl('home-the-health-of') }}
        </p>
        <cite>{{ ftl('home-mitchell-baker-v2') }}</cite>
      </blockquote>
    </div>
  </div>

  <section class="c-products mzp-l-content mzp-t-content-xl">
    <h2>{{ ftl('home-mozilla-makes-privacy') }}</h2>

    <ul class="c-product-columns mzp-l-columns mzp-t-columns-four">

      <!-- Firefox -->
      {% call picto(
        base_el='li',
        title=ftl('home-product-firefox-browsing'),
        image=resp_img(
          url='protocol/img/logos/firefox/browser/logo.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'loading': 'lazy',
            'width': '50',
            'height': '50'
          }
          ),
          body=True,
          ) %}
        <a href="{{ "https://www.firefox.com/"}}" class="mzp-c-button mzp-t-secondary" id="homepage-get-firefox" data-cta-text="Get Firefox" >{{ ftl('home-cta-get-firefox') }}</a>
      {% endcall %}

      <!-- Relay -->
      {% call picto(
        base_el='li',
        title=ftl('home-product-relay-hide-your'),
        image=resp_img(
          url='protocol/img/logos/firefox/relay/logo.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'loading': 'lazy',
            'width': '50',
            'height': '50'
          }
          ),
          body=True,
          ) %}
        <a href="https://relay.firefox.com/{{ utm_params }}" rel="external noopener" class="mzp-c-button mzp-t-secondary" id="homepage-get-relay" data-cta-text="Get Relay" data-cta-type="relay">{{ ftl('home-cta-get-relay') }}</a>
      {% endcall %}

      <!-- VPN -->
      {% call picto(
        base_el='li',
        title=ftl('home-product-vpn-trust'),
        image=resp_img(
          url='protocol/img/logos/mozilla/vpn/logo.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'loading': 'lazy',
            'width': '50',
            'height': '50'
          }
          ),
          body=True,
          ) %}
        <a href="{{ url('products.vpn.landing') }}" class="mzp-c-button mzp-t-secondary" id="homepage-get-mozilla-vpn" data-cta-text="Get Mozilla VPN" data-cta-type="vpn">{{ ftl('home-cta-get-vpn') }}</a>
      {% endcall %}

      <!-- Monitor -->
      {% call picto(
        base_el='li',
        title=ftl('home-product-monitor-protect-your'),
        image=resp_img(
          url='protocol/img/logos/firefox/monitor/logo.svg',
          optional_attributes={
            'class': 'mzp-c-picto-image',
            'loading': 'lazy',
            'width': '50',
            'height': '50'
          }
          ),
          body=True,
          ) %}
         <a href="https://monitor.mozilla.org/{{ utm_params }}" rel="external noopener" class="mzp-c-button mzp-t-secondary" id="homepage-get-monitor" data-cta-text="Get Mozilla Monitor" data-cta-type="monitor">{{ ftl('home-cta-get-monitor')}}</a>
      {% endcall %}

    </ul>
  </section>

  <div class="c-quote politico">
    <div class="c-quote-wrapper mzp-l-content mzp-t-content-lg">
      <blockquote>
        <p>{{ ftl('home-mozilla-takes-bets') }}
        </p>
        <cite>{{ ftl('home-politico-cite') }}</cite>
      </blockquote>
    </div>
  </div>

  <section class="c-mission">

    <!-- Trustworthy AI -->

    {% if ftl_has_messages('home-join-us-in-shaping', 'home-work-on-ai') %}
      {% call split(
          block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl c-trustworthy-ai',
          image=resp_img(
            url='img/home/2023/colorwaves.jpg',
            srcset={
              'img/home/2023/colorwaves-high-res.jpg': '2x'
            },
            optional_attributes={
              'class': 'mzp-c-split-media-asset',
              'loading': 'lazy'
            }
          ),
          media_after=False
      ) %}
      <h2>{{ ftl('home-join-us-in-shaping') }}</h2>
      <p>{{ ftl('home-work-on-ai') }}</p>
      <a href="https://blog.mozilla.org/en/mozilla/ai/next-steps-for-mozilla-and-trustworthy-ai/{{utm_params}}" rel="external noopener" class="mzp-c-button">{{ ftl('home-read-more') }}</a>
      {% endcall %}
    {% endif %}

    {% set moz_ventures = 'href="%s" data-cta-text="Mozilla Ventures"'|safe|format(('https://mozilla.vc/'+utm_params)) %}
    {% set moz_ai = 'href="%s" data-cta-text="Mozilla AI"'|safe|format(('https://mozilla.ai/'+utm_params)) %}

    <!-- Foundation -->
    {% call split(
        block_class='mzp-l-split-center-on-sm-md mzp-l-split-reversed mzp-t-content-xl c-foundation',
        image=resp_img(
          url='img/home/2023/mofo-split.png',
          srcset={
            'img/home/2023/mofo-split-high-res.jpg': '2x'
          },
          optional_attributes={
            'class': 'mzp-c-split-media-asset',
            'loading': 'lazy'
          }
        ),
        media_after=False
    ) %}
    <h2>{{ ftl('home-so-what-is-mozilla') }}</h2>
    <p>{{ ftl('home-at-its-core-v2', ventures=moz_ventures, mozai=moz_ai) }}</p>
    <a href="https://foundation.mozilla.org/{{ utm_params }}" rel="external noopener" class="mzp-c-button">
      {{ ftl('home-learn-about-mofo') }}
    </a>
    {% endcall %}

    <!-- Mid-page promo -->
    {% if switch("mofo-donate-promo") %}
      {% include 'mozorg/home/includes/mofo-donate-promo.html' %}
    {% else %}
      {% include 'mozorg/home/includes/featured-vpn.html' %}
    {% endif %}

    <!-- Contribute -->
    {% call split(
        block_class='mzp-l-split-center-on-sm-md mzp-t-content-xl c-volunteer',
        image=resp_img(
          url='img/home/2023/contribute-split.png',
          srcset={
            'img/home/2023/contribute-split-high-res.png': '2x'
          },
          optional_attributes={
            'class': 'mzp-c-split-media-asset',
            'loading': 'lazy'
          }
        ),
        media_after=False
    ) %}
    <h2 >{{ ftl('home-join-the-fight')}}</h2>
    <p>{{ ftl('home-your-voice-your-code') }}</p>
    <a href="{{ url('mozorg.contribute') }}" class="mzp-c-button">{{ ftl('home-volunteer-with-mozilla') }}</a>
    {% endcall %}
  </section>

  <section class="c-about">
    <div class="c-about-wrapper mzp-l-content mzp-t-content-lg">
      <h2>{{ ftl('home-that-one-time') }}</h2>
      <p>{{ ftl('home-the-mozilla-project') }}</p>
      <p>{{ ftl('home-eventually-the-open') }}</p>
      <p>{{ ftl('home-today-mozilla-continues') }}</p>
      <div class="c-about-cta">
        <a href="{{ url('mozorg.about.index') }}" class="mzp-c-button">{{ ftl('home-learn-more-about-mozilla') }}</a>
      </div>
      <div class="c-dino">
        <img loading="lazy" src="{{ static('img/home/2023/mozilla-dino.svg') }}" alt="">
      </div>
    </div>
  </section>

  <aside class="c-newsletter" aria-label="{{ ftl('newsletter-form-label') }}">
    <div class="c-newsletter-wrapper mzp-l-content mzp-t-content-lg">
      <div class="c-newsletter-info">
        <h2>{{ ftl('newsletter-form-join-the-community', fallback='newsletter-form-get-firefox-news') }}</h2>
        <p>{{ ftl('newsletter-form-sign-up-to-receive', fallback='newsletter-form-get-firefox-tips') }}</p>
      </div>

      <div class="c-newsletter-content">
        {{ email_newsletter_form(
          newsletters='mozilla-and-you',
          title=None,
          button_class='button-dark',
          )}}
        </div>
      </div>
  </aside>
</main>
{% endblock %}

{% block js %}
  {{ js_bundle('newsletter') }}

  {% if show_firefox_app_store_banner %}
    {{ js_bundle('firefox-app-store-banner') }}
  {% endif %}
{% endblock %}
